<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            margin: 200px auto;

            /* 去除表格的间隙 */
            border-collapse: collapse;
        }

        table thead tr th {
            margin: 0;
            padding: 0 30px;
            background-color: #ccc;
            border: 1px solid #000;
        }

        table tbody tr td {
            width: auto;
            text-align: center;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>魏璎珞</td>
                <td>JavaScript</td>
                <td>100</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>弘历</td>
                <td>JavaScript</td>
                <td>100</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>傅恒</td>
                <td>JavaScript</td>
                <td>100</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>明玉</td>
                <td>JavaScript</td>
                <td>100</td>
                <td>删除</td>
            </tr> -->

        </tbody>
    </table>

    <script>
        var datas = [{
            name: '卫英络',
            subject: 'JavaScript',
            score: 100
        },
        {
            name: '小红',
            subject: 'JavaScript',
            score: 99
        },
        {
            name: '小3',
            subject: 'JavaScript',
            score: 60
        }, {
            name: '小4',
            subject: 'JavaScript',
            score: 60
        }, {
            name: '小5',
            subject: 'JavaScript',
            score: 60
        }, {
            name: '小6',
            subject: 'JavaScript',
            score: 60
        }, {
            name: '小d',
            subject: 'JavaScript',
            score: 60
        },
        ]
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
        }
        var line = tbody.querySelectorAll('tr');
        // console.log(line.length);
        for (var i = 0; i < line.length; i++) {
            for (var k in datas[i]) {
                // console.log(datas[i][k]);
                var td = document.createElement('td');
                td.innerHTML = datas[i][k];
                line[i].appendChild(td);
            }
            var td = document.createElement('td');
            td.innerHTML = '<a href="java:;">删除</a>';
            line[i].appendChild(td);
        }
        var del = document.querySelectorAll('a');
        console.log(del.length);
        for (var i = 0; i < del.length; i++) {
            del[i].onclick = function () {
                tbody.removeChild(this.parentElement.parentElement);
            }
        }
    </script>
</body>

</html>